<template>
  <div class="margin-t-20">
    <a-tabs v-model="activeKey" type="editable-card" @edit="onDelTabs" hide-add>
      <a-tab-pane :key="0" :tab="`功能栏`" :closable="false">
        <div class="func_box">
          <div>
            <a-icon type="font-colors" />
            <span>单行文本</span>
            <a-button
              :disabled="isRelType == ''"
              class="nbcs-btn nbcs-btn-primary"
              @click="createTemplate('1', '单行文本',{})"
              >新建</a-button
            >
          </div>
          <div v-if="isRelType == 1 || isRelType == ''">
            <a-icon type="align-left" />
            <span>多行文本</span>
            <a-button
              :disabled="isRelType == '' || isRelType == '2'"
              class="nbcs-btn nbcs-btn-primary"
              @click="createTemplate('2', '多行文本',{})"
              >新建</a-button
            >
          </div>
          <div v-if="isRelType == 1 || isRelType == ''">
            <a-icon type="clock-circle" />
            <span>时间窗</span>
            <a-button
              :disabled="isRelType == '' || isRelType == '2'"
              class="nbcs-btn nbcs-btn-primary"
              @click="createTemplate('3', '时间窗',{})"
              >新建</a-button
            >
          </div>
          <div v-if="isRelType == 1 || isRelType == ''">
            <a-icon type="table" />
            <span>表格</span>
            <a-button
              :disabled="isRelType == '' || isRelType == '2'"
              class="nbcs-btn nbcs-btn-primary"
              @click="createTemplate('4', '表格',{})"
              >新建</a-button
            >
          </div>
        </div>
        <p class="red small-font padding-l-10 margin-b-40">* 创建窗口前需先选择设备或标签</p>
      </a-tab-pane>
      <a-tab-pane forceRender v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="true">
          <div v-if="pane.type == 1">
            <single-line-text-form
              :tabsKey="pane.key"
              @updateTabs="updateTabs"
              :ref="`singleText${pane.key}`" 
              ></single-line-text-form>
          </div>
          <div v-else-if="pane.type == 2">
            <multi-line-text-form
              :tabsKey="pane.key"
              @updateTabs="updateTabs"
              :ref="`multiText${pane.key}`" 
              ></multi-line-text-form>
          </div>
          <div v-else-if="pane.type == 3">
            <time-window-form 
              :tabsKey="pane.key"
              @updateTabs="updateTabs"
              :ref="`timeWindow${pane.key}`" 
              ></time-window-form>
          </div>
          <div v-else-if="pane.type == 4">
            <table-form
              :tabsKey="pane.key"
              @updateTabs="updateTabs"
              :ref="`table${pane.key}`" 
              ></table-form>
          </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import timeWindowForm from '@/components/led/timeWindowForm';
import singleLineTextForm from '@/components/led/singleLineTextForm';
import multiLineTextForm from '@/components/led/multiLineTextForm';
import tableForm from '@/components/led/tableForm';
import { mapMutations} from 'vuex';

export default {
  data() {
    return {
      panes: [],
      tabIndex: 1,
      activeKey:0,
      isRelType:''
    };
  },
  props: {
    relType: {
      type: String,
      default: ''
    },
  },
  watch: {
    relType(newVal){
      this.isRelType = newVal;
    }
  },
  components: {
    timeWindowForm,
    singleLineTextForm,
    multiLineTextForm,
    tableForm
  },
  created () {
    this.isRelType = this.relType;
  },
  methods: {
    ...mapMutations("program", ["delProgramData"]),
    //type标签卡类型，title标签卡名称，item数据，isEdit是否可编辑
    createTemplate(type, title, item, isEdit) {
      if(this.relType == '2'){
        if(this.panes.length > 0){
          this.$message.warning('设备标签下只能添加1个文本窗');
          return false;
        }
      }
      let timeArr = this.panes.filter((item) => item.type == 3);
      if(timeArr.length >= 5){
        this.$message.warning('最多添加5个时间窗');
        return false;
      }
      let textArr = this.panes.filter((item) => item.type == 1 || item.type == 2 || item.type == 4);
      if(textArr.length >= 10){
        this.$message.warning('最多添加10个图文窗');
        return false;
      }
      let key = item.key ? item.key : this.tabIndex;
      //添加tabs模板
      this.panes.push({
        key: key,//标签索引
        title: title, //素材名|标签卡类型名称
        type: type, //标签卡类型
      });
      this.activeKey = key;
      // 创建窗口对象
      this.$nextTick(()=>{
        if(type == 3){
          //创建时间窗
          this.$refs[`timeWindow${key}`][0].createObj(`timeWindow${key}`,item, isEdit);
        } else if(type == 1){
          //创建单行文本
          this.$refs[`singleText${key}`][0].createObj(`singleText${key}`,item, isEdit);
        } else if(type == 2){
          //创建多行文本
          this.$refs[`multiText${key}`][0].createObj(`multiText${key}`,item, isEdit);
        } else if(type == 4){
          //创建表格
          this.$refs[`table${key}`][0].createObj(`table${key}`,item, isEdit);
        }
        this.tabIndex = key + 1;
      })
    },
    delTabs(key){
      let index = this.panes.findIndex(item => item.key == key);
      this.panes.splice(index,1);
      this.activeKey = 0;
    },
    onDelTabs(key){
      this.delProgramData(key);
      let index = this.panes.findIndex(item => item.key == key);
      const type = this.panes[index]['type'];
      if(type == '3'){
        document.getElementById(`timeWindow${key}`).remove();
      } else if(type == '1'){
        document.getElementById(`singleText${key}`).remove();
      } else if(type == '2'){
        document.getElementById(`multiText${key}`).remove();
      } else if(type == '4'){
        document.getElementById(`table${key}`).remove();
      }
      this.delTabs(key);
    },
    //表单提交后点击确定更新窗口名字
    updateTabs(obj){
      let index = this.panes.findIndex((item) => item.key == obj.key);
      this.panes[index]['title'] = obj.title;
    },
    //获取当前的tab页数组
    getCurrentPanes(){
      return this.panes;
    }
  },
};
</script>

<style lang="less" scoped>
.func_box {
  display: flex;
  padding: 10px 20px 20px 10px;
  & > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 60px;
    i {
      font-size: 45px;
      color: #2979e7;
      margin-bottom: 6px;
      & + span {
        margin-bottom: 4px;
        font-size: 10px;
        color: #2979e7;
      }
    }
  }
}
</style>
